<template>
  <div>
    <el-row>
      <el-col :span="24" class="oneSpace">
        <div class="oneInnerSpace">
          <el-row>
            <el-col :span="4">当前被选中数据：</el-col>
            <el-col :span="20"><el-text class="highShow">{{ selectDataFieldDetail }}</el-text></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="2">字段名称：</el-col>
                <el-col :span="4"><el-input v-model="fieldName" placeholder="Please input" /></el-col>
                <el-col :span="2">字段描述：</el-col>
                <el-col :span="4"><el-input v-model="fieldDesc" placeholder="Please input" /></el-col>
                <el-col :span="2">表名：</el-col>
                <el-col :span="4"><el-input v-model="tableName" placeholder="Please input" /></el-col>
                <el-col :span="2">数据库名：</el-col>
                <el-col :span="4"><el-input v-model="databaseName" placeholder="Please input" /></el-col>
              </el-row>
              <el-row>
                <el-col :span="6">与选中的需求内容关联：</el-col>
                <el-col :span="2"><el-switch v-model="linkPrd" /></el-col>
              </el-row>
              <el-row style="margin-top: 5px">
                <el-col :span="13"></el-col>
                <el-col :span="3"><el-button type="primary" @click="clearSelectdDataFieldId">清除选中</el-button></el-col>
                <el-col :span="2"><el-button type="primary" @click="searchDataField"
                    :loading="loading">查询</el-button></el-col>
                <el-col :span="2"><el-button type="primary" @click="dataFieldFormVisible = true">新增</el-button></el-col>
                <el-col :span="4"><el-button type="primary" @click="linkPrdAndDataField">与需求关联</el-button></el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData" style="width: 100%; height: 300px;" highlight-current-row
                @current-change="selectDataField">
                <el-table-column prop="fieldName" label="字段名称">
                </el-table-column>
                <el-table-column prop="fieldDesc" label="字段描述">
                </el-table-column>
                <el-table-column prop="fieldType" label="字段类型">
                </el-table-column>
                <el-table-column prop="tableName" label="表名">
                </el-table-column>
                <el-table-column prop="databaseName" label="数据库名">
                </el-table-column>
                <el-table-column prop="databaseType" label="数据库类型">
                </el-table-column>
                <el-table-column prop="databaseDesc" label="数据库类型">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="110">
                  <template #default="scope">
                    <el-button link type="primary" size="small" @click="lookRelationship(scope.row)">查看关联字段</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="oneSpace">
        <div class="oneInnerSpace">
          <el-row>
            <el-col :span="4">当前被选中数据：</el-col>
            <el-col :span="20"><el-text class="highShow">{{ selectPrdInfoDetail }}</el-text></el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="2">需求编号:</el-col>
                <el-col :span="4"><el-input v-model="prdCode" placeholder="Please input" /></el-col>
                <el-col :span="2">需求名称:</el-col>
                <el-col :span="4"><el-input v-model="requirementName" placeholder="Please input" /></el-col>
                <el-col :span="2">需求描述:</el-col>
                <el-col :span="4"><el-input v-model="requirementDesc" placeholder="Please input" /></el-col>
                <el-col :span="2">需求备注:</el-col>
                <el-col :span="4"><el-input v-model="requirementRemark" placeholder="Please input" /></el-col>
              </el-row>
              <el-row>
                <el-col :span="6">与选中的数据库字段关联：</el-col>
                <el-col :span="2"><el-switch v-model="linkDataField" /></el-col>
              </el-row>
              <el-row style="margin-top: 5px">
                <el-col :span="12"></el-col>
                <el-col :span="3"><el-button type="primary" @click="clearSelectdPrdInfoId">清除选中</el-button></el-col>
                <el-col :span="2"><el-button type="primary" @click="searchPrdInfos"
                    :loading="loading">查询</el-button></el-col>
                <el-col :span="2"><el-button type="primary" @click="prdInfoFormVisible = true">新增</el-button></el-col>
                <el-col :span="5"><el-button type="primary" @click="linkPrdAndDataField">与数据库字段关联</el-button></el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="prdData" style="width: 100%; height: 300px;" highlight-current-row
                @current-change="selectPrdInfo">
                <el-table-column prop="prdCode" label="需求编号">
                </el-table-column>
                <el-table-column prop="requirementName" label="需求名称">
                </el-table-column>
                <el-table-column prop="requirementDesc" label="需求明细">
                </el-table-column>
                <el-table-column prop="requirementRemark" label="需求备注">
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>


    <!--- 新增数据字段的对话框 -->
    <el-dialog v-model="dataFieldFormVisible" title="新增数据字段">
      <el-text class="highShow">{{ currentSelectdPrdInfoId ? '当前添加的数据库字段将自动与与选中的需求关联' : '当前添加的数据库字段将不会自动关联任何需求'
      }}</el-text>
      <el-form :model="dataFieldForm">
        <el-form-item label="字段名:" :label-width="formLabelWidth">
          <el-input v-model="dataFieldForm.fieldName" />
        </el-form-item>
        <el-form-item label="字段描述:" :label-width="formLabelWidth">
          <el-input v-model="dataFieldForm.fieldDesc" />
        </el-form-item>
        <el-form-item label="字段类型:" :label-width="formLabelWidth">
          <el-input v-model="dataFieldForm.fieldType" />
        </el-form-item>
        <el-form-item label="表名:" :label-width="formLabelWidth">
          <el-input v-model="dataFieldForm.tableName" />
        </el-form-item>
        <el-form-item label="数据库名:" :label-width="formLabelWidth">
          <el-input v-model="dataFieldForm.databaseName" />
        </el-form-item>
        <el-form-item label="数据库类型:" :label-width="formLabelWidth">
          <el-input v-model="dataFieldForm.databaseType" />
        </el-form-item>
        <el-form-item label="数据库描述:" :label-width="formLabelWidth">
          <el-input v-model="dataFieldForm.databaseDesc" />
        </el-form-item>
        <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dataFieldFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDataField" :loading="loading">保存</el-button>
        </span>
      </template>
    </el-dialog>


    <!--- 新增PRD的对话框 -->
    <el-dialog v-model="prdInfoFormVisible" title="新增需求内容">
      <el-text class="highShow">{{ currentSelectdDataFieldId ? '当前添加的数据库字段将自动与与选中的数据库字段关联' : '当前添加的数据库字段将不会自动关联任何数据库字段'
      }}</el-text>
      <el-form :model="prdInfoForm">
        <el-form-item label="需求编号:" :label-width="formLabelWidth">
          <el-input v-model="prdInfoForm.prdCode" />
        </el-form-item>
        <el-form-item label="需求名称:" :label-width="formLabelWidth">
          <el-input v-model="prdInfoForm.requirementName" />
        </el-form-item>
        <el-form-item label="需求描述:" :label-width="formLabelWidth">
          <el-input v-model="prdInfoForm.requirementDesc" />
        </el-form-item>
        <el-form-item label="需求备注:" :label-width="formLabelWidth">
          <el-input v-model="prdInfoForm.requirementRemark" />
        </el-form-item>
        <!-- <el-form-item label="Zones" :label-width="formLabelWidth">
    <el-select v-model="form.region" placeholder="Please select a zone">
      <el-option label="Zone No.1" value="shanghai" />
      <el-option label="Zone No.2" value="beijing" />
    </el-select>
  </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="prdInfoFormVisible = false">取消</el-button>
          <el-button type="primary" @click="savePrdInfo" :loading="loading">保存</el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

<script>
// import { ref } from 'vue'
import axios from 'axios'
import { ElNotification } from 'element-plus'

export default {
  name: 'DataField',
  data() {
    return {
      loading: false,

      tableData: [],
      fieldName: "",
      fieldDesc: "",
      tableName: "",
      databaseName: "",
      dataFieldFormVisible: false,
      dataFieldForm: {
        fieldName: "",
        fieldDesc: "",
        fieldType: "",
        tableName: "",
        databaseName: "",
        databaseType: "",
        databaseDesc: ""
      },
      currentSelectdDataFieldId: "",
      selectDataFieldDetail: "",
      linkPrd: false,

      prdData: [],
      prdCode: "",
      requirementName: "",
      requirementDesc: "",
      requirementRemark: "",
      prdInfoFormVisible: false,
      prdInfoForm: {
        prdCode: "",
        requirementName: "",
        requirementDesc: "",
        requirementRemark: ""
      },
      currentSelectdPrdInfoId: "",
      selectPrdInfoDetail: "",
      linkDataField: false
    }
  },
  mounted() {
    this.getDataFields()
    this.searchPrdInfos()
  },
  methods: {
    // 公共方法
    linkPrdAndDataField() {
      if (!this.currentSelectdDataFieldId) {
        ElNotification({
          title: '选择数据',
          message: '请选择一条数据库字段',
          type: 'error',
        })
        return;
      }
      if (!this.currentSelectdPrdInfoId) {
        ElNotification({
          title: '选择数据',
          message: '请选择一条需求描述',
          type: 'error',
        })
        return;
      }
      axios.post('/easy_metadata/link/to', {
        "prdInfoId": this.currentSelectdPrdInfoId,
        "dataFieldId": this.currentSelectdDataFieldId
      })
        .then(response => {
          if (response.data.data) {
            ElNotification({
              title: '成功',
              message: '关联成功',
              type: 'success',
            })
          } else {
            ElNotification({
              title: '失败',
              message: '发生异常，关联失败',
              type: 'error',
            })
          }
        })
        .catch(error => {
          console.log(error)
          ElNotification({
            title: '保存失败',
            message: '发生异常，保存失败',
            type: 'error',
          })
        })
    },
    // 跳转到数据库字段关联关系查看页面
    lookRelationship(data) {
      this.$router.push({ name: 'linkField', query: data });
    },

    // 查询数据库字段信息
    getDataFields() {
      this.loading = true;
      axios.post('/easy_metadata/data_field/list', {
        "fieldName": this.fieldName,
        "fieldDesc": this.fieldDesc,
        "tableName": this.tableName,
        "databaseName": this.databaseName,
        "prdInfoId": this.currentSelectdPrdInfoId,
        "linkPrd": this.linkPrd
      })
        .then(response => {
          this.loading = false;
          this.tableData = response.data.data.records
        })
        .catch(error => {
          this.loading = false;
          console.log(error)
        })
    },
    searchDataField() {
      this.getDataFields();
    },
    saveDataField() {
      this.loading = true;
      var postData = this.dataFieldForm;
      postData.prdInfoId = this.currentSelectdPrdInfoId;
      axios.post('/easy_metadata/data_field/add', postData)
        .then(response => {
          this.loading = false;
          if (response.data.data) {
            this.dataFieldFormVisible = false
            this.dataFieldForm.fieldName = ""
            this.dataFieldForm.fieldDesc = ""
            this.dataFieldForm.fieldType = ""
            this.dataFieldForm.tableName = ""
            this.dataFieldForm.databaseName = ""
            this.dataFieldForm.databaseType = ""
            this.dataFieldForm.databaseDesc = ""
            this.getDataFields()
          } else {
            ElNotification({
              title: '保存失败',
              message: '发生异常，保存失败',
              type: 'error',
            })
          }
        })
        .catch(error => {
          this.loading = false;
          console.log(error)
          ElNotification({
            title: '保存失败',
            message: '发生异常，保存失败',
            type: 'error',
          })
        })
    },
    selectDataField(currentSelectd, oldSelectd) {
      console.log(oldSelectd);
      if (currentSelectd) {
        this.currentSelectdDataFieldId = currentSelectd.id;
        this.selectDataFieldDetail = "[" + currentSelectd.databaseName + "   (" + currentSelectd.databaseType + ")]   " + currentSelectd.tableName + "   :   " + currentSelectd.fieldName + "(" + currentSelectd.fieldDesc + ")"
      }
    },
    clearSelectdDataFieldId() {
      this.currentSelectdDataFieldId = "";
      this.selectDataFieldDetail = "";
      this.getDataFields();
    },

    // 获取PRD信息
    searchPrdInfos() {
      this.loading = true;
      axios.post('/easy_metadata/prd/info/list', {
        "prdCode": this.prdCode,
        "requirementName": this.requirementName,
        "requirementDesc": this.requirementDesc,
        "requirementRemark": this.requirementRemark,
        "dataFieldId": this.currentSelectdDataFieldId,
        "linkDataField": this.linkDataField
      }).then(response => {
        this.loading = false;
        this.prdData = response.data.data.records;
      })
        .catch(error => {
          this.loading = false;
          console.log(error)
          ElNotification({
            title: '保存失败',
            message: '发生异常，保存失败',
            type: 'error',
          })
        })
    },
    savePrdInfo() {
      this.loading = true;
      axios.post('/easy_metadata/prd/info/add', this.prdInfoForm)
        .then(response => {
          this.loading = false;
          if (response.data.data) {
            this.prdInfoForm.prdCode = "";
            this.prdInfoForm.requirementName = "";
            this.prdInfoForm.requirementDesc = "";
            this.prdInfoForm.requirementRemark = "";
            this.prdInfoForm = false;
            this.searchPrdInfos();
          } else {
            ElNotification({
              title: '保存失败',
              message: '发生异常，保存失败',
              type: 'error',
            })
          }
        })
        .catch(error => {
          this.loading = false;
          console.log(error)
          ElNotification({
            title: '保存失败',
            message: '发生异常，保存失败',
            type: 'error',
          })
        })
    },
    selectPrdInfo(currentSelectd, oldSelectd) {
      console.log(oldSelectd);
      if (currentSelectd) {
        this.currentSelectdPrdInfoId = currentSelectd.prdInfoId;
        this.selectPrdInfoDetail = currentSelectd.prdCode + "[" + currentSelectd.requirementDesc + "]";
      }
    },
    clearSelectdPrdInfoId() {
      this.currentSelectdPrdInfoId = "";
      this.selectPrdInfoDetail = "";
      this.searchPrdInfos();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.oneSpace {
  border: 1px solid var(--el-border-color);
}

.oneInnerSpace {
  width: 98%;
  margin: 0 auto;
}

.oneSpaceTitle {
  width: 100%;
  text-align: center;
  margin-bottom: 9px;
}

.el-row {
  margin-top: 2px;
  margin-bottom: 2px;
}

.highShow {
  color: red;
}
</style>
